<!doctype html>
<html>
<head>
  <title>Network | Static smooth curves</title>

  <script type="text/javascript" src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    #mynetwork {
      width: 500px;
      height: 500px;
      border: 1px solid lightgray;
    }
  </style>
  
</head>

<body>

<h2>Smooth curves</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
    All the smooth curves in the examples so far have been using dynamic smooth curves. This means that each curve has a
    support node which takes part in the physics simulation. For large networks or dense clusters, this may not be the ideal
    solution. To solve this, static smooth curves have been added. The static smooth curves are based only on the positions of the connected
    nodes. There are multiple ways to determine the way this curve is drawn. This example shows the effect of the different
    types. <br /> <br />
    Drag the node around to see how the smooth curves are drawn for each setting. For animated system, we
    recommend only the continuous mode. In the next example you can see the effect of these methods on a large network. Keep in mind
    that the direction (the from and to) of the curve matters.
    <br /> <br />
    When you select the dynamic type, you can see the interaction with the fixed node and the edge, any other type will not interact with other nodes.
    <br /> <br />
</div>

<div id="mynetwork"></div>

<script type="text/javascript">

  // create an array with nodes
  var nodes = [
    {id: 1, label: 'Fixed node', x:0, y:0, fixed:true},
    {id: 2, label: 'Drag me', x:150, y:130, physics:false},
    {id: 3, label: 'Obstacle', x:80, y:-80, fixed:true, mass:10}
  ];

  // create an array with edges
  var edges = [
    {from: 1, to: 2, arrows:'to'}
  ];

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {
    physics:true,
    configure:function (option, path) {
      if (path.indexOf('smooth') !== -1 || option === 'smooth') {
        return true;
      }
      return false;
    },
    edges: {
      smooth: {
        type: 'continuous'
      }
    }
  };
  var network = new vis.Network(container, data, options);


</script>

</body>
</html>
